<template>
  <HModal @cancel="close" okText="确定" cancelText="取消"
          @ok="handleOK" :visible="visible" title="设置字段值">
    <FieldComponentDelegate style="width: 100%" ref="fieldComponent"
                            :fieldComponentRegistry="fieldComponentRegistry" :field="field"/>
  </HModal>
</template>
<script>
import HModal from '@/components/HModal/HModal.vue';
import {Input} from 'ant-design-vue';
import FieldComponentDelegate from '@/components/FieldComponentDelegate/FieldComponentDelegate.vue';
import {createProps} from '@/utils';

export default {
  name: 'FieldExtendModal',
  components: {HModal, FieldComponentDelegate},
  props: {
    field: createProps(Object),
    fieldComponentRegistry: createProps(Object)
  },
  data() {
    return {
      Input,
      visible: false
    };
  },
  render(h) {
    return h(HModal, {
      visible: this.visible,
    }, [this.createFieldComponent(h)]);
  },
  methods: {
    createFieldComponent(h) {
      return h(Input);
    },
    open() {
      this.visible = true;
    },
    handleOK() {
      let data = this.$refs.fieldComponent.getFieldData();
      if(!data) return;
      this.close();
      this.$emit('ok', data);
    },
    close() {
      this.visible = false;
    },
  }
};
</script>